<template>
    <div class="show">
        <a :href="data.url">
            <img :src="data.topurl" alt="">
        </a>
        <a :href="data.url">
            <img :src="data.bgurl" alt="">
        </a>
        <a 
        :href="data.url"  
        v-for="(item) in data.imgs"
        :key="item.id"  >
            <img :src="item.img_url.url" alt="">
        </a>

    </div>
</template>

<script>
import axios from 'axios'
import { mapState,mapMutations } from 'vuex'
export default {
     name:'ActiveShow', 
     data(){
         return{
             data:[]
         }
     },
     
    computed:{
        ...mapState(['baseUrl','activitedId'])
    },
     mounted() {
         this.install()
     },
     watch: {
         activitedId(val){
             console.log(val)
             this.getOneActive(val)
         }
     },
     methods: {
         install(){
             this.getOneActive(this.activitedId)
         },
         getOneActive(activitedId){
             axios.get(
                this.baseUrl+'cms/OneActivated',
                {
                    params:{
                        id:activitedId,
                        
                    }
                })
            .then(this.getOneActiveSucc)
         },
         getOneActiveSucc(response){
            
            this.data = response.data

             
               
                    this.topurl = this.data.top_img.url
                    this.data['topurl'] = this.topurl
                    this.bgurl = this.data.bg_img.url
                    this.data['bgurl'] = this.bgurl

                
                
            
             console.log(this.data )
         }
     },
}
</script>

<style lang="stylus" scope>
.show{
    height 600px
    overflow-y scroll
}
a{
    display:block
}
img{
    width 100%
}
</style>

